<template>
	<view class="container">
		<view class="certificateInfo" v-if="!verifying">
			<image v-if="!verifyflag" src="../../static/image/betalent/bg.png"></image>
			<view v-else class="verifystatus" :class="verifyresult?'successverify':'failverify'">
				<image class="verifyicon" :src="verifyresult?'../../static/image/betalent/successverify.png':'../../static/image/betalent/failverify.png'"></image>
				<text class="verifyresult">{{verifyresult?'认证成功':'认证失败'}}</text>
				<view class="verifydetail">{{verifyresult?'你已成为社区达人，赶快联系社区组织活动吧！':failedMessage}}</view>
			</view>
		</view>
		<view class="uniform" v-if="!verifying">
			<view class="formtitle">达人申请</view>
			<uni-forms ref="valiForm" :rules="rules" :modelValue="valiFormData" border="true" err-show-type="toast">
				<uni-forms-item name="username">
					<view class="labeltext">姓名</view>
					<input type="text" placeholder-style="color:#B7B7B7;" class="inputstyle" :inputBorder="false" v-model="valiFormData.username" placeholder="请输入真实姓名" @input="disableflag=false" :disabled="verifyresult">
				</uni-forms-item>
				<uni-forms-item>
					<view class="labeltext">手机号</view>
					<input :inputBorder="false" v-model="useTele" disabled>
				</uni-forms-item>
				<uni-forms-item name="userarea">
					<view class="labeltext">领域</view>
					<view class="areacont">
						<picker class="pickerstyle" @change="bindPickerChange" :value="areaindex" :range="areaarray" range-key="name" :disabled="verifyresult">
							<view class="uni-input">{{areaarray[areaindex].name?areaarray[areaindex].name:""}}
							<text class="areaplace" v-show='!areaarray[areaindex].name'>选择你的领域</text>
							<image class="rightArrow" src="../../static/index/right2x.png"></image>
							</view>
						</picker>
					</view>
				</uni-forms-item>
				<uni-forms-item name="userskill" >
					<view class="labeltext">擅长技能</view>
					<input type="text" placeholder-style="color:#B7B7B7;" class="inputstyle" :inputBorder="false" v-model="valiFormData.userskill" placeholder="输入你所擅长的技能" @input="disableflag=false" :disabled="verifyresult">
				</uni-forms-item>
				<uni-forms-item name="userintro">
					<view class="labeltext">自我介绍</view>
					<input type="text" placeholder-style="color:#B7B7B7;" class="inputstyle" :inputBorder="false" v-model="valiFormData.userintro" placeholder="输入自我介绍，建议50字以上" @input="disableflag=false" :disabled="verifyresult">
				</uni-forms-item>
				<uni-forms-item name="userimg">
					<view class="labeltext">达人形象照</view>
					<view class="addimgtip">如个人照片，才艺照片，最多上传1张</view>
					<view class="addimgbtn2">
						<block v-if="imageSrc">
							<image :src="imageSrc" class="imagecss" mode="scaleToFill" @tap="previewImage"></image>
							<view v-if="!verifyresult" class="delIcon" @tap="deleteimg">
								<uni-icons color="white" type="closeempty" size="15"></uni-icons>
							</view>
						</block>
						<block v-else>
							<view class="addfile" @tap="chooseImage">+</view>
						</block>
					</view>
				</uni-forms-item>
			</uni-forms>
			<view class="lastline"></view>
			<button :class="disableflag?'confirmdisbtn':'confirmbtn'" :disabled="disableflag" @click="submit">提交</button>
		</view>
		<view v-show='verifying' class="waitingPage" >
			<image class="waitingimg" src="../../static/image/betalent/processing.png"></image>
			<view class="waitingtext">资料审核中,请耐心等待~~</view>
			<button class="confirmbtn" @click="goback">返回上页</button>
		</view>
	</view>
</template>

<script>
	import * as api from "@/http/api";
	export default {
		data() {
			return {
				disableflag:true,
				verifying:false,
				verifyflag:true,
				verifyresult:false,
				inputchangeflag:false,
				failedMessage:'',
				areaarray: [],
				areaindex: -1,
				oldobj: {
					username: '',
					userarea: '',
					userskill:'',
					userintro:'',
					userimg: '',
				},
				// 校验表单数据
				valiFormData: {
					username: '',
					userarea: '',
					userskill:'',
					userintro:'',
					userimg: '',
				},
				useTele:"",
				// 校验规则
				rules: {
					username: {
						rules: [{
							required: true,
							errorMessage: '请填写姓名'
						},
						 {
							pattern:'^[\\u2E80-\\u9FFF]+$',
							errorMessage: '姓名需要为中文，不能出现数字、字母和符号。'
						}],
					},
					userarea: {
						rules: [{
							required: true,
							errorMessage: '请选择你的领域'
						}]
					},
					userskill: {
						rules: [{
							required: true,
							errorMessage: '请填写你所擅长的技能'
						}]
					},
					userintro: {
						rules: [{
							required: true,
							errorMessage: '请填写自我介绍'
						}]
					},
					userimg:{
						rules: [{
							required: true,
							errorMessage: '请上传形象照'
						}]
					}
				},
				imageSrc: '',
				isImgFy: false,
			}
		},
		onLoad(event) {
			//未认证 UNAUTHORIZED,  认证中 AUTHENTICATING,  认证成功 AUTHENTICATION_SUCCESSFUL,  认证失败 AUTHENTICATION_FAILED,
			console.log(JSON.parse(decodeURIComponent(event.verifyresult)))
			this.useTele=this.$store.state.mobile.replace(/^(\d{3})(\d{4})/g, '$1 $2 ');
			let verifyresult=JSON.parse(decodeURIComponent(event.verifyresult));
			this.getTerritory(verifyresult.status);
			if(verifyresult.status==='UNAUTHORIZED'){
				this.verifying=false;
				this.verifyflag=false;
				this.verifyresult=false;
			}else{
				if(verifyresult.status==='AUTHENTICATING'){
					this.verifying=true;
					this.verifyflag=false;
					this.verifyresult=false;
				}else if(verifyresult.status==='AUTHENTICATION_SUCCESSFUL'){
					this.verifying=false;
					this.verifyflag=true;
					this.verifyresult=true;
				}else if(verifyresult.status==='AUTHENTICATION_FAILED'){
					this.verifying=false;
					this.verifyflag=true;
					this.verifyresult=false;
					this.failedMessage=verifyresult.failedMessage;
				}
			}
		},
		onShow(){
			if(this.valiFormData.userarea!==""){
				this.areaarray.forEach((item,idx) => {
					if(item.name===this.valiFormData.userarea){
						this.areaindex=idx;
					}
				});	
			}
		},
		onReady() {
			// 需要在onReady中设置规则
			//this.$refs.valiForm.setRules(this.rules);
		},
		methods: {
			previewImage() {
				uni.previewImage({
				    urls: [this.imageSrc]
				})
			},
			chooseImage() {
				uni.chooseImage({
					count: 1,
					sizeType: ['original','compressed'],
					sourceType: ['album','camera'],
					success: (res) => {
						const tempFilePaths = res.tempFilePaths;
						const tempFiles = res.tempFiles;
						let resSize = tempFiles[0].size;
						if (resSize > 1048576) {
							uni.showToast({
								title: "上传图片大小不能超过1M",
								icon: 'none'
							});
							return
						} else {
							uni.uploadFile({
								url: api.upload,
								filePath: tempFilePaths[0],
								name: `file`,
								success: (imgres) => {
									const resData = JSON.parse(imgres.data)
									if(resData.code === 200){
										this.imageSrc = resData.data;
										this.valiFormData.userimg=resData.data;
										this.disableflag=false;
										this.isImgFy = true;
									}else{
										this.disableflag=true;
										this.isImgFy = false;
										uni.showToast({
											title: '图片上传失败',
											icon: 'error'
										})
									}
								},
								fail: (err) => {
									this.disableflag=true;
									this.isImgFy = false;
									console.log('uploadFile', err);
								}
							});
						}
					},
					fail: (err) => {
						console.log('chooseImage', err)
					}
				})
			},
			bindPickerChange: function(e) {
				this.areaindex = e.detail.value
				this.valiFormData.userarea=this.areaarray[this.areaindex].name;
				this.disableflag=false;
			},
			goback(){
				uni.navigateBack()
			},
			postInfo(inputdata){//提交信息
				console.log("inputdata",inputdata)
				this.$request({
					url: api.goCertificate,
					data: {
						"ability": inputdata.userskill,
						"imgUrl": inputdata.userimg,
						"introduction": inputdata.userintro,
						"mobile": this.$store.state.mobile,
						"name": inputdata.username,
						"territory": inputdata.userarea,
					},
					method: 'POST'
				}).then(res=>{
					this.verifying=true;
					this.oldobj.username=inputdata.username;
					this.oldobj.userarea=inputdata.userarea;
					this.oldobj.userskill=inputdata.userskill;
					this.oldobj.userintro=inputdata.userintro;
					this.oldobj.userimg=inputdata.userimg;
					this.verifying=true;
					this.verifyflag=false;
					this.verifyresult=false;
				}).catch(err => {
					console.log("err",err)
				})
			},
			getTerritory(status){
				this.areaarray=[];
				this.$request({
					url: api.getTerritory,
					method: 'POST'
				}).then(res=>{
					console.log(res);
					this.areaarray=res;
					if(status!=='UNAUTHORIZED'){
						this.getVerifyInfo();
					}
				})
			},
			getVerifyInfo(){//获取达人申请信息
				this.$request({
					url: api.getCertification,
					method: 'POST'
				}).then(res=>{
					console.log(res);
					this.valiFormData.username=res.name;
					this.valiFormData.userarea=res.territory;
					this.valiFormData.userskill=res.ability;
					this.valiFormData.userintro=res.introduction;
					this.valiFormData.userimg=res.imgUrl;
					this.imageSrc = res.imgUrl;
					this.useTele=res.mobile.replace(/^(\d{3})(\d{4})/g, '$1 $2 ');
					this.oldobj={...this.valiFormData};
					if(this.valiFormData.userarea!==""){
						this.areaarray.forEach((item,idx) => {
							if(item.name===this.valiFormData.userarea){
								this.areaindex=idx;
							}
						});	
					}
				})
			},
			submit() {
				this.disableflag=true;
				this.$refs.valiForm.validate().then(res => {
					console.log("submit-res",res)
					if(this.oldobj.userimg===this.valiFormData.userimg){//图片无改动
						this.compareinput(res);
						if(this.inputchangeflag){//内容有改动
							this.postInfo(res);
						}else{
							uni.showToast({
								title: '重复提交',
								icon:'error',
							});
						}
					}else{
						console.log('图片有改动');
						if (!this.isImgFy) {
							console.log('图片上传失败');
							uni.showToast({
								title: '图片上传失败',
								icon: 'error'
							});
							this.disableflag=true;
							return false
						}
						this.postInfo(res);
					}
				}).catch(err => {
					console.log('表单验证失败', err);
				})
			},
			compareinput(newobj){
				console.log(newobj)
				console.log(this.oldobj)
				for(let key in newobj){
					if(key!="userimg"){
						if(newobj[key]!==this.oldobj[key]){
							this.inputchangeflag=true;
						}
					}
				}
			},
			deleteimg(){
				this.imageSrc = '';
				this.valiFormData.userimg='';
				this.disableflag=false;
			}
		}
	}
</script>

<style lang="scss" scoped>
.container{
	position: relative;
	.certificateInfo{
		width: 100%;
		height: 260rpx;
		.verifystatus{
			width:100%;
			height:100%;
			padding:28rpx 0 0 32rpx;
			font-size: 32rpx;
			.verifyicon{
				width: 48rpx;
				height: 48rpx;
				margin-right:12rpx;
				vertical-align: text-top;
			}
			.verifyresult{
			}
			.verifydetail{
				margin-top:18rpx;
				font-size: 28rpx;
			}
		}
		.successverify{
			background: #F1FFCF;
			color: #1BCC43;
		}
		.failverify{
			background: #FFE3E3;
			color: #E84335;
		}
	}
	.uniform{
		background-color: #fff;
		border-radius: 50rpx 50rpx 0 0;
		padding:50rpx 26rpx 80rpx 32rpx;
		position: relative;
		top: -64rpx;
		.formtitle{
			font-size: 48rpx;
			color: #000000;
		}
		.inputstyle{
			font-size: 32rpx;
			color: #333333;
		}
		.labeltext{
			font-size: 32rpx;
			color: rgba(0, 0, 0, 0.85);
			margin-bottom: 22rpx;
			margin-top:50rpx;
		}
		.addimgtip{
			font-size: 32rpx;
			color: #B7B7B7;
			margin-bottom:32rpx;
		}
		button{
			width: 480rpx;
			height: 88rpx;
			border-radius: 46rpx;
			margin-top:66rpx;
		}
		.confirmdisbtn{
			color: #666666;
			background: #D5D5D5;
		}
		.confirmbtn{
			color: #FFFFFF;
			background: #FBA378;;
		}
		.lastline{
			width:100%;
			height:4rpx;
			border-bottom: 1px #eee solid;
		}
		.areacont{
			// position: relative;
			.pickerstyle{
				position: relative;
				right:0;
				top: 0;
			}
			.areaplace{
				font-size: 32rpx;
				color: #B7B7B7;
				position: absolute;
				left:0;
				top:0;
			}
			.rightArrow{
				width: 18rpx;
				height: 32rpx;
				position: absolute;
				right:0;
				top:9rpx;
				z-index: 10;
			}
			.uni-input{
				font-size: 32rpx;
				color: #333333;
				padding:0;
			}
		}
		.addimgbtn2{
			position: relative;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 200rpx;
			width: 200rpx;
			border-radius: 8rpx;
			border: 0.5rpx solid #B7B7B7;
			.imagecss {
				width: 100%;
				height: 100%;
			}
			.delIcon{
				position: absolute;
				display: flex;
				justify-content: center;
				align-items: center;
				top: 10rpx;
				right: 10rpx;
				width: 48rpx;
				height: 48rpx;
				border-radius: 24rpx;
				// opacity: 0.3;
				background-color: #000000;
			}
			.addfile {
				width: 100%;
				height: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 40rpx;
				color: #808080;
			}
		}
		
	}
	.waitingPage{
		width:100%;
		height:100vh;
		background:#fff;
		text-align: center;
		// padding-top:290rpx;
		.waitingimg{
			width:372rpx;
			height:284rpx;
			margin-top: 290rpx;
		}
		.waitingtext{
			font-size: 40rpx;
			color: #7F7F7F;
			margin:32rpx 0 36rpx 0;
		}
		.confirmbtn{
			width: 480rpx;
			height: 88rpx;
			font-size: 32rpx;
			border-radius: 46rpx;
			color: #FFFFFF;
			background: #FF6C25;
			opacity: 0.6;
		}
	}
}
</style>
